<template>
  <view class="setPassword">
    <u-form ref="uForm" :model="form" label-width="160">
      <u-form-item :label="$t('旧密码')" prop="oldPassword" required>
        <u-input v-model="form.oldPassword" type="password" />
      </u-form-item>
      <u-form-item :label="$t('新密码')" prop="newPassword" required>
        <u-input v-model="form.newPassword" type="password" />
      </u-form-item>
      <u-form-item :label="$t('确认密码')" prop="aginPassword" required>
        <u-input v-model="form.aginPassword" type="password" />
      </u-form-item>
    </u-form>
    <view class="forget" @click="forget">{{$t('忘记密码')}}</view>
    <u-collapse v-if="password_gz.length > 0" class="passwordRules">
      <u-collapse-item align="right" :title="$t('密码规则')">
        <view v-for="(item, index) in password_gz" :key="index" class="passwordRules-item">
          {{ item }}
        </view>
      </u-collapse-item>
    </u-collapse>
    <u-button type="primary" @click="submission">{{$t('确认修改')}}</u-button>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: mapGetters(['userInfo', 'api', 'app', 'userToken']),
  data() {
    return {
      password_gz: [],

      form: {
        oldPassword: '',
        newPassword: '',
        aginPassword: ''
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: this.$t('必填'),
            trigger: ['change', 'blur']
          }
        ],
        newPassword: [
          {
            required: true,
            message: this.$t('必填'),
            trigger: ['change', 'blur']
          }
        ],
        aginPassword: [
          {
            required: true,
            message: this.$t('必填'),
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad() {
    uni.setNavigationBarTitle({title: this.$t('设置密码')})
    //获取密码规则
    this.getTips()
  },
  methods: {
    ...mapActions(['set_userInfo', 'set_userToken', 'userInfo']),
    forget() {
      uni.navigateTo({
        url: '../findPassword/findPassword?phone=' + this.userInfo.phone,
        success: (res) => {},
        fail: () => {},
        complete: () => {}
      })
    },
    //更新
    submission() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (this.form.newPassword === this.form.aginPassword) {
            this.$u.post(this.api.GLOBAL_auth_user_changePasswordV1, this.form).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: this.$t('更新成功'), duration: 2000 })
                //stroe存储登陆用户信息
                this.set_userInfo(res.data)
                this.set_userToken(res.data.token)
              }
            })
          } else {
            uni.showToast({
              title: this.$t('两次密码不一致'),
              icon: 'none'
            })
          }
        }
      })
    },
    //获取密码规则
    getTips() {
      this.$u.post(this.api.GLOBAL_auth_strategypassword_getTips, {}).then((res) => {
        if (res.code === 200) {
          this.password_gz = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setPassword {
  height: 100%;
  padding: 0 30rpx;

  .forget {
    float: left;
    margin-top: 20px;
    color: #007aff;
  }

  .passwordRules {
    width: 100%;
    text-align: right;
    padding: 20rpx 0;
    color: #888;

    .passwordRules-item {
      text-align: right;
      padding-right: 20rpx;
    }
  }
}
</style>
